<template>
    <div :class="`bigScreen ${screenStatus ? 'full' : ''}`">
        <div style="margin: 20px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">{{ $t('index.index.20250324-38') }}</div>
                                <div class="card-value">
                                    {{ electricity }}
                                    <span class="card-unit">{{ $t('index.index.20250324-39') }}</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <img src="@/assets/images/card-show01.png" alt="" class="card-img" />
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                {{ $t('index.index.20250324-40') }}
                            </div>
                            <div class="card-label">
                                {{ setTableData[0].spikesPrice }}
                            </div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                {{ $t('index.index.20250324-41') }}
                            </div>
                            <div class="card-label">
                                {{ setTableData[0].peaksPrice }}
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">{{ $t('index.index.20250324-42') }}</div>
                                <div class="card-value">
                                    {{ water }}
                                    <span class="card-unit"> {{ $t('index.index.20250324-43') }}</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <img src="@/assets/images/card-show02.png" alt="" class="card-img" />
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                {{ $t('index.index.20250324-44') }}
                            </div>
                            <div class="card-label">{{ setTableData[0].coolingType }}</div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                {{ $t('index.index.20250324-45') }}
                            </div>
                            <div class="card-label">{{ setTableData[0].softeningType }}</div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">{{ $t('index.index.20250324-46') }}</div>
                                <div class="card-value">
                                    {{ gas }}
                                    <span class="card-unit"> {{ $t('index.index.20250324-43') }}</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <div ref="card-chart1" style="width: 160px; height: 70px"></div>
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                {{ $t('index.index.20250324-47') }}
                            </div>
                            <div class="card-label">{{ setTableData[0].airHeat }}</div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                {{ $t('index.index.20250324-48') }}
                            </div>
                            <div class="card-label">{{ setTableData[0].naturalGas }}</div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card class="chart-card" shadow="never">
                        <div class="card-show flex-between">
                            <div class="card-left">
                                <div class="card-title">{{ $t('index.index.20250324-49') }}</div>
                                <div class="card-value">
                                    {{ energy }}
                                    <span class="card-unit"> {{ $t('index.index.20250324-43') }}</span>
                                </div>
                            </div>
                            <div class="card-right">
                                <div ref="card-chart2" style="width: 160px; height: 70px"></div>
                            </div>
                        </div>
                        <div class="card-content flex-between">
                            <div class="card-label">
                                <i class="card-point" style="background-color: #13ce66"></i>
                                {{ $t('index.index.20250324-50') }}
                            </div>
                            <div class="card-label">{{ setTableData[0].coolCapacity }}</div>
                            <div class="card-label">
                                <i class="card-point" style="background-color: #ff4949"></i>
                                {{ $t('index.index.20250324-51') }}
                            </div>
                            <div class="card-label">{{ setTableData[0].heatCapacity }}</div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <el-card class="line-chart" shadow="never">
            <!--            <div class="date-type">
                <el-radio-group class="fr ml10" plain size="mini" v-model="lineType" @input="getList">
                    <el-radio-button label="1">日</el-radio-button>
                    <el-radio-button label="2">月</el-radio-button>
                    <el-radio-button label="3">年</el-radio-button>
                </el-radio-group>
            </div>-->
            <p style="margin-top: -2px; font-size: 18px; color: #000; box-sizing: border-box">
                {{ $t('index.index.20250324-52') }}</p>
            <div class="line-chart chart-outer" ref="lineChart" style="width: 100%; height: 270px"></div>
        </el-card>
        <el-card class="bar-chart" shadow="never">
            <div ref="statsChart" class="chart-outer" style="width: 100%; height: 250px"></div>
        </el-card>
        <div style="width: 100%; text-align: center; font-size: 14px; color: #666; line-height: 32px; margin-top: 50px">
            <span>
                Copyright © 2024
                <a href="https://iot.yanfankeji.com/" target="_blank">Yanfan</a>
                |
                <a href="https://iot.yanfankeji.com/" target="_blank">{{ $t('index.index.20250324-28') }}</a>
                | Apache License
            </span>
            <br />
            <span>
                {{ $t('index.index.20250324-29') }}
                <a href="http://doc.yanfankeji.com/" target="_blank">https://doc.yanfankeji.com/</a>
            </span>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { timeotalElectricity, totalWorkshopCostStatistical } from "@/views/energy/api/energy/energyTotalAnalysis";
import { unitPriceSet } from "@/views/energy/api/energy/energyCostsSet";
export default {
    name: 'index',
    data() {
        return {
            screenStatus: false,
            lineType: '1',
            barType: '1',
            card_chart1: null,
            card_chart2: null,
            deviceStatistic: {},
            colorList: ['#0147EB', '#14C9C9', '#F7BA1E', '#A3D12E', '#FA9134', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
            stats: {},
            searchData: {
                buildingId: '',
                workshopId: '',
                floor: '',
                date: null,
                unit: 1
            },
            costStatisticsX: [],
            costStatisticsY: [],
            costStatisticsL: [],
            monthData: ['1' + this.$t('index.index.20250324-15'), '2' + this.$t('index.index.20250324-15'), '3' + this.$t('index.index.20250324-15'), '4' + this.$t('index.index.20250324-15'), '5' + this.$t('index.index.20250324-15'), '6' + this.$t('index.index.20250324-15'), '7' + this.$t('index.index.20250324-15'), '8' + this.$t('index.index.20250324-15'), '9' + this.$t('index.index.20250324-15'), '10' + this.$t('index.index.20250324-15'), '11' + this.$t('index.index.20250324-15'), '12' + this.$t('index.index.20250324-15')],
            weekData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            timeElectricityX: [],
            timeElectricityY: [],
            setTableData: [{}],
            form: [],
            types: [
                { type: 1, value: 'coolingType', name: '冷却水' },
                { type: 2, value: 'softeningType', name: '软化水' },
                { type: 3, value: 'tapType', name: '自来水' },
                { type: 4, value: 'compressedAir', name: '压缩空气' },
                { type: 5, value: 'naturalGas', name: '燃气' },
                { type: 6, value: 'steam', name: '蒸汽' },
                { type: 7, value: 'spikesPrice', name: '尖电' },
                { type: 8, value: 'peaksPrice', name: '峰电' },
                { type: 9, value: 'parityPrice', name: '平电' },
                { type: 10, value: 'lowEbbPrice', name: '谷电' },
                { type: 11, value: 'airHeat', name: '压缩空气' },
                { type: 12, value: 'coolCapacity', name: '冷量' },
                { type: 13, value: 'heatCapacity', name: '热量' },
            ],
            electricity: 0,
            water: 0,
            gas: 0,
            energy: 0,
        };
    },
    created() {
        this.getCostStatistics('month')
        this.gettimeElectricity('month')
        this.getUnitPriceSet()
    },
    methods: {
        getUnitPriceSet() {
            const data = {
                currPage: 1,
                pageSize: 9,
            }
            unitPriceSet(data).then(response => {
                const res = response.data
                const obj = {}
                // this.setTableData = []
                this.form.list = []
                res.list.map(item => {
                    var names = this.jumpType(item.type)
                    obj[names] = item.price
                    if (item.type == 5 || item.type == 7 || item.type == 8 || item.type == 9 || item.type == 10) {
                        const objs = {
                            id: item.id,
                            price: item.price,
                            type: item.type,
                            startTime: item.startTime ? item.startTime.slice(11) : '',
                            endTime: item.endTime ? item.endTime.slice(11) : ''
                        }
                        this.form.list.push(objs)
                    }
                })
                this.form.list.reverse()
                this.setTableData=[obj];
                let dian = (this.setTableData[0].spikesPrice + this.setTableData[0].peaksPrice + this.setTableData[0].parityPrice + this.setTableData[0].lowEbbPrice) / 4;
                let shui = (this.setTableData[0].coolingType + this.setTableData[0].softeningType + this.setTableData[0].tapType) / 3;
                let qi = (this.setTableData[0].airHeat + this.setTableData[0].naturalGas) / 2;
                let ny = (this.setTableData[0].coolCapacity + this.setTableData[0].heatCapacity) / 2;
                this.electricity = dian.toFixed(2);
                this.water = shui.toFixed(2);
                this.gas = qi.toFixed(2);
                this.energy = ny.toFixed(2);
            })
        },
        jumpType(ty) {
            const it = this.types.filter(item => item.type == ty);
            if (it && it.length > 0) {
                return it[0].value;
            }
            return null;
        },
        getCostStatistics(val) {
            this.charts1 = true
            const obj = {
                buildingId: this.searchData.buildingId,
                floorId: this.searchData.floor,
                workshopId: this.searchData.workshopId,
                range: val,
                begin: val ? '' : this.searchData.date[0] || '',
                end: val ? '' : this.searchData.date[1] || '',
                unit: 1
            }
            totalWorkshopCostStatistical(obj).then(response => {
                const res = response.data
                this.costStatisticsL = Object.keys(res)
                this.costStatisticsY = []
                this.costStatisticsX = []
                if (JSON.stringify(res) !== "{}") {
                    if (val === 'month') {
                        this.costStatisticsX = this.monthData
                    } else if (val === 'week') {
                        this.costStatisticsX = this.weekData
                    } else if (val === 'day') {
                        if (res[this.costStatisticsL[0]] && res[this.costStatisticsL[0]].workshopData) {
                            for (let i = 0; i < res[this.costStatisticsL[0]].workshopData.length; i++) {
                                this.costStatisticsX.push(i + 1)
                            }
                        } else {
                            this.costStatisticsX = []
                        }
                    } else {
                        res[this.costStatisticsL[0]].workshopData.map(item => {
                            this.costStatisticsX.push(item.date.slice(5))
                        })
                    }
                } else {
                    this.costStatisticsX = []
                }
                for (let i in res) {
                    const objs = {
                        name: i,
                        type: 'bar',
                        stack: "Search Engine",
                        data: []
                    }
                    res[i].workshopData.map(item => {
                        objs.data.push(item.number)
                    })
                    this.costStatisticsY.push(objs)
                }
                this.drawStats()
            })

        },
        drawCardChart1() {
            // 基于准备好的dom，初始化echarts实例
            this.card_chart1 = echarts.init(this.$refs['card-chart1']);
            var option;
            let xAxis = [];
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: false,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 2762, 2600],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        color: 'rgba(1, 71, 235, 0.1)',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(1, 71, 235, 0.1)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(1, 71, 235, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.card_chart1.setOption(option);
        },
        drawCardChart2() {
            // 基于准备好的dom，初始化echarts实例
            this.card_chart2 = echarts.init(this.$refs['card-chart2']);
            var option;
            let xAxis = [];
            option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    show: false,
                },
                yAxis: {
                    type: 'value',
                    show: false,
                },
                series: [
                    {
                        data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 2762, 2600],
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        color: 'rgba(0, 201, 159, 0.4)',
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(0, 201, 159, 0.4)', // 渐变色的起始颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(0, 201, 159, 0)', // 渐变色的结束颜色
                                },
                            ]),
                        },
                    },
                ],
            };
            this.card_chart2.setOption(option);
        },
        drawLine() {
            // 基于准备好的dom，初始化echarts实例
            this.line_chart = echarts.init(this.$refs.lineChart);
            var option;
            option = {
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                color: this.colorList,
                legend: {
                    right: 'left',
                    top: 0,
                    orient: 'horizontal',
                    itemGap: 10,
                    icon: 'circle',
                },
                grid: {
                    left: '3%',
                    right: '50',
                    bottom: '20',
                    top: '20%',
                    // containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: this.timeElectricityX,
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    axisTick: {
                        show: false,
                    },
                    splitNumber: 2,
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    splitLine: {
                        //网格线
                        lineStyle: {
                            type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show: false, //隐藏或显示
                    },
                },
                series: [
                    {
                        name: this.$t('index.index.20250324-40'),
                        type: 'line',
                        smooth: true,
                        data: this.timeElectricityY.spikes
                    },
                    {
                        name: this.$t('index.index.20250324-54'),
                        type: 'line',
                        smooth: true,
                        data: this.timeElectricityY.peaks
                    },
                    {
                        name: this.$t('index.index.20250324-55'),
                        type: 'line',
                        smooth: true,
                        data: this.timeElectricityY.parity
                    },
                    {
                        name: this.$t('index.index.20250324-56'),
                        type: 'line',
                        smooth: true,
                        data: this.timeElectricityY.lowEbb
                    }
                ],
            };
            this.line_chart.setOption(option);
        },
        gettimeElectricity(val) {
            this.charts3 = true
            const obj = {
                buildingId: this.searchData.buildingId,
                floorId: this.searchData.floor,
                workshopId: this.searchData.workshopId,
                range: val,
                begin: val ? '' : this.searchData.date[0] || '',
                end: val ? '' : this.searchData.date[1] || '',
                unit: this.searchData.unit
            }
            timeotalElectricity(obj).then(response => {
                const res = response.data
                this.timeElectricityX = []
                this.timeElectricityY = {
                    spikes: [],
                    peaks: [],
                    parity: [],
                    lowEbb: []
                }
                console.log(val)
                if (val === 'month') {
                    this.timeElectricityX = this.monthData
                } else if (val === 'week') {
                    this.timeElectricityX = this.weekData
                } else if (val === 'day') {
                    for (let i = 0; i < res.spikes.length; i++) {
                        this.timeElectricityX.push(i + 1)
                    }
                } else {
                    res.spikes.map(item => {
                        this.timeElectricityX.push(item.date.slice(5))
                    })
                }
                res.spikes.map((item, index) => {
                    this.timeElectricityY.spikes.push(item.number)
                    this.timeElectricityY.peaks.push(res.peaks[index].number)
                    this.timeElectricityY.parity.push(res.parity[index].number)
                    this.timeElectricityY.lowEbb.push(res.lowEbb[index].number)
                })
                this.drawLine()
            })
        },
        drawStats() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(this.$refs.statsChart);
            var option;

            option = {
                title: {
                    text: this.$t('index.index.20250324-53'),
                    textStyle: {
                        fontSize: 18,
                        color: '#000',
                        fontWeight: 800,
                    },
                },
                animationDuration: 3000,
                tooltip: {
                    trigger: 'axis',
                },
                color: this.colorList,
                legend: {
                    right: 'left',
                    top: 0,
                    orient: 'horizontal',
                    itemGap: 10,
                    icon: 'circle',
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    splitNumber: 2,
                    splitLine: {
                        //网格线
                        lineStyle: {
                            type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
                        },
                        show: false, //隐藏或显示
                    },
                },
                yAxis: {
                    type: 'category',
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                    },
                    axisTick: {
                        show: false,
                    },
                    data: this.costStatisticsX,
                },
                series: this.costStatisticsY
            };

            option && myChart.setOption(option);
        },
    },
    mounted() {
        this.drawCardChart1();
        this.drawCardChart2();
    },
};
</script>

<style lang="scss">
@import '../bigScreen/index.scss';

.el-card {
    border: 0px;

    .chart-outer {
        &>div:nth-child(1) {
            width: 100% !important;

            &>canvas {
                width: 100% !important;
            }
        }
    }
}
</style>
